<template>
  <div v-if="message">
    <Section title="输入">
      {{ message.input }}
    </Section>
    <Section title="输出">
      {{ message.output }}
    </Section>

    <template v-if="message?.result">
      <template v-if="message?.result?.data?.response">
        <app-json :text="message?.result?.data?.response" />
      </template>
      <template v-else>
        {{ message?.result }}
      </template>
    </template>
    <template v-else>
      <app-markdown :text="message?.content"></app-markdown>
    </template>
  </div>
</template>
<script setup>
import Section from './Section.vue'
import { state, messageObj } from '../../chat.js'

const props = defineProps({
  messages: Array,
})

const message = computed(() => {
  return state.messageId ? messageObj[state.messageId] : null
})
</script>
<style lang="scss" scoped></style>
